<template>
  <div class="liveOnline">
    <!-- 线上洽谈 -->
    <div class="topBox">
      <div class="res">
        <span>审核结果：</span>
        <span class="status">审核中</span>
        <span>批准最多同时发起会议数2个</span>
      </div>
      <div class="num">
        <span>最多同时发起会议数（个）</span>
        <input type="text" name id />
        <button>提交</button>
      </div>
    </div>
    <div class="bottomBox">
      <div class="item3 item">
        <div class="left">
          <div class="title">临时会议室占用状态</div>
          <div class="status" style="padding-top:0.22rem;">
            <span style="display:inline-block;width:0.14rem;height:0.14rem;background:#d9001b;"></span>
            <span>占用中</span>
            <span
              style="display:inline-block;width:0.14rem;height:0.14rem;background:#70b603;margin-left:0.25rem;"
            ></span>
            <span>可用</span>
          </div>
        </div>
        <div class="right">
          <div class="time" style="padding-top: 0.1rem;">
            <div class="rightA" style="display:inline-block;width:2.24rem;height:0.38rem;">10:00</div>
            <div class="rightB" style="display:inline-block;width:3rem;height:0.38rem;">13:00</div>
            <div class="rightc" style="display:inline-block;">16:00</div>
          </div>
          <div class="foot" style="margin-left:15px;">
            <div
              class="rightA"
              style="display:inline-block;width:2.24rem;height:0.38rem;background:#d9001b;"
            ></div>
            <div
              class="rightB"
              style="display:inline-block;width:3rem;height:0.38rem;background:#70b603;"
            ></div>
          </div>
          <div class="btn">
            <!-- <el-button @click="dialogTableVisible = true">预约临时会议</el-button> -->
            <el-button type="text" @click="dialogTableVisible = true">预约临时会议</el-button>
          </div>
        </div>
      </div>
      <div class="temporary">
        <div class="temporaryTile">临时会议室</div>
        <div class="temporaryFrom">
          <div class="fromTile" v-for="(item,index) in fromTile" :key="index">
            <div class="name">{{item.title}}</div>
          </div>
        </div>
        <div class="temporaryList" v-for="(item,index) in temporaryList" :key="index">
          <div>{{index + 1}}</div>
          <div>{{item.startTime|formatDate}}</div>
          <div>{{item.endTime|formatDate}}</div>
          <div>{{item.meetingName}}</div>
          <div>{{item.remark}}</div>
          <div>{{item.appointmentState}}</div>
        </div>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="dialogFormVisible">
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>-->

    <el-dialog :visible.sync="dialogTableVisible" class="dialog" width="25%">
      <div class="one" style="display: flex;margin-bottom:0.22rem;">
        <span
          class="test"
          style="height:0.4rem;line-height:0.4rem;display: inline-block;width: 1.48rem;text-align: center;"
        >会议主题</span>
        <input style="outline:none;width: 2rem;border: 1px solid #DCDFE6;" type="text"  v-model="main" />
      </div>
      <div class="one" style="display: flex;margin-bottom:0.22rem;">
        <span
          class="test"
          style="height:0.4rem;line-height:0.4rem;display: inline-block;width: 1.48rem;text-align: center;"
          
        >开始时间</span>
        <el-date-picker
                v-model="value3"
                type="datetime"
                placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <div class="one" style="display: flex;margin-bottom:0.22rem;">
        <span
          class="test"
          style="height:0.4rem;line-height:0.4rem;display: inline-block;width: 1.48rem;text-align: center;"
        >结束时间</span>
        <el-date-picker
                v-model="value4"
                type="datetime"
                placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <div class="one" style="display: flex;margin-bottom:0.22rem;">
        <span
          class="test"
          style="height:0.4rem;line-height:0.4rem;display: inline-block;width: 1.48rem;text-align: center;"
        >备注</span>
        <input style="outline:none;width: 2rem;border: 1px solid #DCDFE6;" type="text"  v-model="room"/>
      </div>
      <button
        style="width:1.6rem;height:0.5rem;background:rgba(0,76,179,1);border-radius:0.05rem;border:none;font-size:0.18rem;color:#fff;margin-left:30%;"
        @click="add()"
      >确定</button>
    </el-dialog>
  </div>
</template>
<script>
import {price,appointment,saveMeeting} from "../../request/home";

export default {
  name: "",
  components: {},
  data() {
    return {
      room:"",
      main:"",
      input:"",
      dialogTableVisible: false,
      dialogFormVisible: false,
      flag: false,
      isShow: true,
      sum:2,
      num: 1, // 会议室数量,
      value1: new Date(),
      value2: new Date(),
      value3: new Date(),
      value4: new Date(),
      fromTile: [
        { title: "序号" },
        { title: "开始时间" },
        { title: "结束时间" },
        { title: "会议主题" },
        { title: "备注" },
        { title: "状态" },
      ],
      temporaryList: [
        // {
        //   startTime: "9:00",
        //   endTime: "10:00",
        //   name: "3D打印技术....",
        //   status: "预约成功",
        // },
        // {
        //   startTime: "9:00",
        //   endTime: "10:00",
        //   name: "3D打印技术....",
        //   status: "预约成功",
        // },
        // {
        //   startTime: "9:00",
        //   endTime: "10:00",
        //   name: "3D打印技术....",
        //   status: "预约成功",
        // },
      ],
    };
  },
  created() {},
  mounted() {
   this.save()
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return  h + ':' + m ;
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    clickBtn() {
      this.flag = true;
      this.isShow = false;
    },
    save(){
      appointment().then(res=>{
        console.log(res)
        this.temporaryList=res.data.data
        this.temporaryList.forEach(e => {
          if(e.appointmentState==1){
            e.appointmentState="预约成功"
          }else{
            e.appointmentState="预约失败"
          }
        });
      })
    },
    add(){
      this.dialogTableVisible = false
      var list={
        id:1,
        meetingName:this.main,
        srtingstartTime:this.value3,
        srtingendTime:this.value4,
        remark:this.room,
        formalOrTemporary:this.sum
      }
      saveMeeting(list).then(res=>{
        console.log(res)
      })
    }
  },
};
</script>
<style lang='less' scoped>
.liveOnline {
  // width: 16.4rem;
  padding-left: 0.28rem;
  box-sizing: border-box;
  .maxBox {
    width: 100%;
    .top {
      // border: 1px solid red;
      width: 15.8rem;
      // height:4rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.08rem;
      font-size: 0.18rem;
      margin-left: 0.3rem;
      // padding-top: 0.3rem;
      padding-left: 0.58rem;
      padding-bottom: 0.4rem;
      margin-bottom: 0.3rem;
      box-sizing: border-box;
      .item {
        align-items: center;
        margin-bottom: 0.4rem;
        display: flex;
        .title {
          margin-right: 0.28rem;
        }
      }
      .item1 {
        padding-top: 0.3rem;
      }
      .item1,
      .item2 {
        display: flex;
      }
      .item3 {
        .left,
        .right {
          display: inline-block;
        }
        .left {
          margin-right: 0.45rem;
        }
      }
      /deep/ .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 1.5rem;
      }
      .commit {
        text-align: center;
        button {
          width: 1.6rem;
          height: 0.5rem;
          border-radius: 0.05rem;
          font-size: 0.18rem;
          color: #ffffff;
          border: none;
          outline: none;
        }
        .ok {
          background: rgba(0, 76, 179, 1);
        }
        .ing {
          background: #999999;
        }
      }
    }
    .bottom {
      width: 15.8rem;
      height: 2.17rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.08rem;
      margin: 0 auto;
      display: flex;
      .result {
        // border: 0.01rem solid red;
        padding-top: 0.35rem;
        font-size: 0.18rem;
        display: flex;
        margin-left: 0.58rem;
        .title {
          color: #e80037;
        }
        .res {
          margin-left: 0.48rem;
          color: #004cb3;
          .remarks {
            margin-top: 0.6rem;
          }
        }
      }
      .message {
        margin-left: 0.9rem;
        height: 2.17rem;
        img {
          height: 100%;
        }
      }
      .copy {
        margin-left: 0.7rem;
        .text {
          font-size: 0.16rem;
          color: #fff;
          line-height: 0.5rem;
          display: inline-block;
          margin: auto 0;
          width: 1.6rem;
          height: 0.5rem;
          background: rgba(0, 76, 179, 1);
          border-radius: 0.05rem;
          text-align: center;
        }
      }
    }
  }
  .topBox {
    width: 15.8rem;
    height: 1.7rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    padding-left: 0.55rem;
    box-sizing: border-box;
    .res {
      // padding-top: 0.2rem;
      padding-bottom: 0.24rem;
      line-height: 0.2rem;
      span {
        color: #004cb3;
        font-size: 0.18rem;
      }
      .status {
        color: #999999;
        padding-right: 0.53rem;
      }
    }
    .num {
      line-height: 0.2rem;
      span {
        color: #004cb3;
        font-size: 0.18rem;
      }
      input {
        width: 2rem;
        height: 0.4rem;
        border: 0.01rem solid rgba(204, 204, 204, 1);
        outline: none;
      }
      button {
        margin-left: 0.48rem;
        width: 1.6rem;
        height: 0.5rem;
        background: rgba(0, 76, 179, 1);
        border-radius: 0.05rem;
        border: none;
        outline: none;
        color: #fff;
        font-size: 0.18rem;
      }
    }
  }
  .bottomBox {
    width: 15.8rem;

    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    margin-top: 0.3rem;
    padding-left: 0.4rem;
    padding-top: 0.33rem;
    box-sizing: border-box;
    .item3 {
      font-size: 0.18rem;
      display: flex;
      .left {
        margin-right: 0.45rem;
      }
      .btn {
        width: 100%;
        display: flex;
        button {
          justify-items: center;
          margin: 0 auto;
          margin-top: 0.2rem;
          width: 1.6rem;
          height: 0.5rem;
          background: rgba(0, 76, 179, 1);
          border-radius: 0.05rem;
          font-size: 0.18rem;
          border: none;
          color: #fff;
          outline: none;
        }

        //   }
      }
    }
    .temporary {
      .temporaryTile {
        font-size: 0.18rem;
        color: #004cb3;
        padding-left: 0.2rem;
        box-sizing: border-box;
        padding-bottom: 0.18rem;
      }
      .temporaryFrom {
        width: 8rem;
        display: flex;
        border: 1px solid rgba(204, 204, 204, 1);
        .fromTile {
          flex: 1;
          //  border: 1px solid red;
          .name {
            // flex: 1;
            text-align: center;
            font-size: 0.18rem;
            color: #004cb3;
            line-height: 0.4rem;
          }
        }
      }
      .temporaryList {
        display: flex;
        width: 8rem;
        div {
          flex: 1;
          font-size: 0.16rem;
          text-align: center;
          color: #333333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 0.4rem;
          // border: 1px solid red;
        }
      }
    }
    /deep/ .el-dialog__body {
      height: 3.14rem;
      .one {
        display: flex;
        .test {
          display: inline-block;
          width: 1.48rem;
          text-align: center;
        }
        input{
          width: 0.78rem !important;
        }
      }
    }
  }
  .dialog {
    .one {
      .test {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
